<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <!-- 2. 使用全局组件 -->
      <my-com></my-com>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- 0. 定义组件视图模板-->
  <template id="temp1">
    <div>
      这是全局组件 - {{name}}
      <button @click="fn">按钮</button>
    </div>
  </template>
  
  <script type="text/javascript">
    // 1. 注册全局组件
    Vue.component("my-com",{
      template:"#temp1",
      data(){
        return {
          name:"张三"
        }
      },
      methods:{
        fn(){
          console.log(this.name)
        }
      }
    })
    
     
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello vue global component"
      }
    })
    
    
  </script>
</html>
